<template>
    <div class="leftUser home-card home-margin-bottom">
        <div class="headCon home-padding-width-heigh">
            <Row type="flex" align="middle">
                <!--<Col span="8"><div class="animat">-->
                    <!--<img class="headImg" :src="con.ipinfo.photo"/></div>-->
                <!--</Col>-->
                <Col span="16">
                    <div class="rightHeight" style="margin: 0 0 0 20px">
                        <a class="home-font name" >{{con.admin_log[0].username}}</a>
                        <a class="home-font-two">管理员</a>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="home-padding-width line">
            <!--<p class="notwrap">上次登录时间: <span >{{con.ipinfo.region|timeOne}}</span></p>-->
            <p class="notwrap">上次登录地点: <span>{{con.ipinfo.country}} {{con.ipinfo.region}} {{con.ipinfo.city}}</span></p>
            <p class="notwrap">上次登录的IP: <span >{{con.ipinfo.ip}}</span></p>
        </div>
    </div>
</template>
<script>
    export default {
        props:{
            con:{
                type: Object,
                default: ()=> {
                    return {}
                }
            }
        }
    }
</script>
<style scoped>
    .leftUser{height: 220px;}
    .headCon{position: relative;}
    .headCon:after{content: "";position: absolute;height:2px;width: calc(100% - 30px);bottom:0px;left:15px;z-index:1;background: rgba(100,100,100,0.1);}
    .headImg{display:block;width: 90%;border-radius: 100%;max-width: 90px;transform-origin: center center;cursor: pointer}
    .leftUser:hover .headImg{animation: animate 0.4s;box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.3)}
    .headImg:hover{animation: animate 0.4s;box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.3)}
    .rightHeight{height: 90px;}
    .name{padding-top: 17px;}
    .line{line-height: 32px;color: rgba(0,0,0,0.5);font-size: 14px;cursor: pointer}
    .line span{display: inline-block;margin-left: 20px;color: rgba(0,0,0,0.7)}
    @keyframes animate {
        0%   {transform: scale3d(1,1,1);}
        25%  {transform: scale3d(0.9,0.9,1);}
        50%  {transform: scale3d(1.2,1.2,1);}
        75%  {transform: scale3d(0.9,0.9,1);}
        100% {transform: scale3d(1,1,1);}
    }
</style>